<template>
	<div class="admin">
		<div class="one">
			<div class="one-top">插件管理</div>
			<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
				<template slot="title">
					<i class="el-icon-location"></i>
					<span>导航一</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="1-1">插件数据</el-menu-item>
				</el-menu-item-group>
			</el-menu>
		</div>
		<div class="tow">
			<div class="tow-top">| 插件数据</div>
			<hr>
			<div class="tow-body">
				<el-menu :default-active="activeIndex" :router="true" class="el-menu-demo" mode="horizontal" @select="handleSelect">
				<el-menu-item index="/home/admin/dash">信用卡还款</el-menu-item>
				<el-menu-item index="/home/admin/orderlist">花费充值</el-menu-item>
				<el-menu-item index="/home/admin/three">水电煤缴费</el-menu-item>
				</el-menu>
					<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'second',
				activeIndex: '1',
				activeIndex2: '1'
			};
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}
		},
	}
</script>

<style scoped="scoped">
	* {
		margin: 0;
		padding: 0;
	}
	
	.tow-top ul{
		float: right;
	}
	.tow-top {
		height: 96px;
		padding-top: 30px;
		padding-left: 35px;
	}
	.tow-body{
		max-width: 1400px;
		margin:  10px 20px 10px 20px;
	}
	.tow hr {
		background-color: #c1c1c1;
	}

	.one .one-top {
		width: 190px;
		height: 96px;
		font-weight: 700;
		padding-top: 30px;
		padding-left: 20px;
	}
	.admin {
		display: flex;
	}

	.one {
		width: 200px;
		background-color: #f0f0f0;
	}

</style>
